<template>
  标题:<input type="text" v-model="ShuJu.TiTle" style="width: 200px;">
  <el-button type="success" @click=ShowList>查询</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="leiXing" label="类型" width="150" />
    <el-table-column prop="status" label="状态" width="120" />
    <el-table-column prop="tiTle" label="标题" width="120" />
    <el-table-column prop="lianJie" label="链接" width="120" />
    <el-table-column prop="miaoShu" label="描述" width="120" />
    <el-table-column prop="createTime" label="发布时间" width="120" >
      <template #default="{row}">
      {{ row.createTime.split("T")[0] }}
      </template>
      </el-table-column>
    <el-table-column prop="peoPle" label="发布人" width="120" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="{row}">
        <el-button type="danger" @click="Del(row.id)">删除</el-button>
        <el-button type="success" @click="Update(row.id)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

<table>

</table>
<tr>
  <td>

    <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 5]"
      :background="true"
      layout="slot, sizes"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    共{{page.totalCount}}条数据,每页显示{{ page.PageSize }}/{{page.totalPage }}页
    当前页{{ page.PageIndex }}页
    </el-pagination>
  </td>
  <td>
    
    <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 5]"
      :background="true"
      layout="slot,prev, pager, next"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页" next-text="下一页"
    >
    <el-button>首页</el-button>
    </el-pagination>
  </td>
  <td>
    
    <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 5]"
      :background="true"
      layout="slot, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页" next-text="下一页"
    >
    <el-button>尾页</el-button>
    </el-pagination>
  </td>
</tr>

</template>

<script lang="ts" setup>
const handleClick = () => {
  console.log('click')
}
import { reactive, ref,onMounted} from 'vue';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import axios from 'axios';

import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
import { ElMessage, ElMessageBox } from 'element-plus';


interface GetType{

  leiXing: string
  status:  string
  tiTle:  string
  lianJie: string
  miaoShu:  string
  createTime: Date
  peoPle: string
  buMen: string
}
const tableData=ref([])


const page={


  PageIndex:1,
  PageSize:3,
  totalCount: 0,
  totalPage: 0,

}

const ShuJu={

  TiTle:''
}
const ShowList=()=>{

  axios({

    url:'https://localhost:7213/api/GetType/GetType/GetType',
    method:'get',
    params:{

      PageIndex:page.PageIndex,
      PageSize:page.PageSize,
      TiTle:ShuJu.TiTle
    }
  }).then((res)=>{

    console.log(res)
    tableData.value=res.data.data.data
    page.totalCount=res.data.data.totalCount
    page.totalPage=res.data.data.totalPage
  })
}

onMounted(()=>{

  ShowList();
})

//删除方法
const Del=(id:any)=>{


  console.log(id);
  
  ElMessageBox.confirm(
    '您确认删除吗?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      
      axios({

        url:'https://localhost:7074/api/GuanLi/Del/Del',
        method:'delete',
        params:{
          Id:id
        }
      }).then((res)=>{

        console.log(res)
        if(res.data.code==200){

          ElMessage.success("删除成功");
          ShowList();
        }
        else{

          ElMessage.success("删除成功");
        }
      })
    })

}

//修改
const Update=(id:any)=>{

  router.push({

    path:"TypeUpdate",
    query:{

      id:id
    }
  })
}



const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  // page.PageSize=val;
  ShowList();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  // page.PageIndex=val;
  ShowList();
}



</script>
